<template>
  <el-table
    v-loading="loading"
    :data="data"
    style="width: 100%"
    stripe
    highlight-current-row
  >
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
      :width="column.width"
      :align="column.align"
    >
      <template v-if="column.customRender" #default="{ row }">
        <component :is="column.customRender({ row })" />
      </template>
      <template v-else #default="{ row }">
        <div class="cell-content">
          {{ row[column.prop] }}
        </div>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="120" align="center">
      <template #default="{ row }">
        <el-button type="primary" size="small" @click="$emit('viewClick', row)">
          查看
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import type { TableField } from './types'

interface Props {
  data: any[]
  loading: boolean
  columns: Array<TableField>
}

defineProps<Props>()
defineEmits(['viewClick'])
</script>

<style scoped>
.cell-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
</style>
